<script setup lang="ts">
import type { MovieItem, MediaType, Response } from "~/types";
import { useInfiniteScroll } from "@vueuse/core";
const isLoading = ref(false);
definePageMeta({
  key: (route) => route.fullPath,
  validate: ({ params }) => {
    return ["movie", "tv", "anime"].includes(params.type as MediaType);
  },
});

const route = useRoute();
const mediaType = computed(() => (route.params.type as MediaType) || "movie");
const mediaDataList = ref<MovieItem[]>([]);
useHead({
  title:
    mediaType.value === "movie"
      ? "电影"
      : mediaType.value === "tv"
      ? "电视剧"
      : "动漫",
});

const activeTypeIndex = ref(0);
const typeList = computed(() => {
  if (mediaType.value === "movie") {
    return [
      "全部",
      "动作片",
      "喜剧片",
      "爱情片",
      "恐怖片",
      "剧情片",
      "战争片",
      "悬疑片",
      "惊悚片",
      "犯罪片",
      "灾难片",
      "奇幻片",
      "纪录片",
      "微电影",
      "预告片",
      "电影解说",
    ];
  } else if (mediaType.value === "tv") {
    return [
      "全部",
      "国产剧",
      "港剧",
      "台剧",
      "韩剧",
      "日剧",
      "美剧",
      "泰剧",
      "海外剧",
      "短剧",
    ];
  } else {
    return [
      "全部",
      "国产动漫",
      "港剧动漫",
      "日韩动漫",
      "欧美动漫",
      "动画片",
      "其他动漫",
    ];
  }
});

const regionIndex = ref(0);
const regionList = [
  "全部",
  "大陆",
  "香港",
  "台湾",
  "美国",
  "韩国",
  "日本",
  "泰国",
  "新加坡",
  "印度",
  "英国",
  "法国",
  "加拿大",
  "西班牙",
  "意大利",
];

const yearIndex = ref(0);
const yearList = [
  "全部",
  "2024",
  "2023",
  "2022",
  "2021",
  "2020",
  "2019",
  "2018",
  "2017",
  "2016",
  "2015",
  "2014",
  "2013",
  "2012",
  "2011",
  "2010",
];
const containerRef = ref<HTMLElement | null>(null);
const pageIndex = ref(1);
const noMoreContent = ref(false);
const getDataRequest = async (next: boolean = false) => {
  if (isLoading.value) return;
  isLoading.value = true;
  const pageSize = 32;
  if (next) {
    pageIndex.value++;
  }
  const { data } = await useFetch<
    Response<{ list: MovieItem[]; total: number }>
  >("/bsmovie/list", {
    baseURL: useRuntimeConfig().public.baseUrl,
    server: false,
    method: "post",
    body: {
      type: mediaType.value === "movie" ? 1 : mediaType.value === "tv" ? 2 : 3,
      year:
        yearList[yearIndex.value] === "全部" ? "" : yearList[yearIndex.value],
      tags:
        typeList.value[activeTypeIndex.value] === "全部"
          ? ""
          : typeList.value[activeTypeIndex.value],
      region:
        regionList[regionIndex.value] === "全部"
          ? ""
          : regionList[regionIndex.value],
      page: pageIndex.value,
      size: pageSize,
    },
    pick: ["data"],
  });
  const his = mediaDataList.value || [];
  mediaDataList.value = his.concat(data.value?.data.list || []);
  noMoreContent.value =
    pageIndex.value * pageSize >= (data.value?.data.total || 0);
  isLoading.value = false;
};

const clearHisData = () => {
  mediaDataList.value = [];
  pageIndex.value = 0;
};

onMounted(() => {
  clearHisData();
  getDataRequest(true);
  useInfiniteScroll(
    containerRef,
    () => {
      getDataRequest(true);
    },
    {
      distance: 30,
      canLoadMore: () => {
        if (noMoreContent.value) return false;
        return true; // for demo purposes
      },
    }
  );
});
</script>

<template>
  <div>
    <div class="transition sticky top-0 z-10 bg-body py-40px">
      <TagList
        title="类型"
        :tag-list="typeList"
        :active-index="activeTypeIndex"
        @change="
          (index) => {
            activeTypeIndex = index;
            clearHisData();
            getDataRequest(true);
          }
        "
      />
      <div h-7></div>
      <TagList
        title="地区"
        :tag-list="regionList"
        :active-index="regionIndex"
        @change="
          (index) => {
            regionIndex = index;
            clearHisData();
            getDataRequest(true);
          }
        "
      />
      <div h-7></div>
      <TagList
        title="时间"
        :tag-list="yearList"
        :active-index="yearIndex"
        @change="
          (index) => {
            yearIndex = index;
            clearHisData();
            getDataRequest(true);
          }
        "
      />
    </div>
    <div
      flex
      flex-wrap
      gap-3
      ref="containerRef"
      class="h-[calc(100vh-250px)] of-y-auto hidden-scrollbar-y"
    >
      <VideoCard
        v-for="item in mediaDataList"
        :key="item.id"
        :record="item"
      ></VideoCard>
      <div
        v-if="isLoading"
        i-carbon:circle-dash
        ma
        text-xl
        animate-spin
        text-center
        my-20px
      ></div>
    </div>
  </div>
</template>

<style scoped></style>
